﻿@page "/components/card"
@page "/components/MudCard"
@page "/components/MudCardActions"
@page "/components/MudCardContent"
@page "/components/MudCardHeader"
@page "/components/MudCardMedia"

<DocsPage>
    <DocsPageHeader Title="Card">
        <Description>
            Cards can contain actions, text, or media like images or graphics. Keeping a card to a single subject keeps the design clean.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple Card">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(CardSimpleExample)">
                <CardSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Outlined">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(CardOutlinedExample)">
                <CardOutlinedExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Header">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(CardHeaderExample)" ShowCode="false">
                <CardHeaderExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Media">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(CardMediaExample)">
                <CardMediaExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Combined">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(CardCombinedExample)" ShowCode="false">
                <CardCombinedExample />
            </SectionContent>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>